Essay: How Storygami Built Al Jazeera’s First Interactive Web-Doc
Guy Gunaratne

In March 2014 we launched the first ever interactive web documentary for global news network Al Jazeera with the heart-rending series Indian Hospital Revisited.

Al Jazeera are at the very forefront of digital news and journalism, from their award winning online content to their beautiful digital magazine. As a news organisation they have not only been at the pivot points of global change but have also been able to change with it, by pioneering new technologies to bring human stories to life with series strands and long form documentary.

Al Jazeera English and Storygami have been in talks for a number of months regarding bringing our interactive technology to their platform. Early indications were that our dedication to both innovation and a deep sense of storytelling were going to make this a great match. In the end both the producing and technical teams at Al Jazeera felt that when the right story came along they’d ask us to pitch for it.

Indian Hospital Revisited became the story we had waited for. The two part series is the follow up to the much acclaimed six part documentary Indian Hospital.

The original series sought to shine a light on Indian society as it is rarely seen. It brought audiences the story of a unique experiment in Indian healthcare at the Narayana Hrudayalaya Hospital Complex in Bangalore – a hospital that aims to treat anybody who walks through its doors, whether rich or poor; where making a profit goes hand in hand with providing free medical care.

This was a great story and one we instinctively knew audiences would want to delve deeper into. We now needed to find the best way to present the story elements into a unified whole. We did this by following a few principles.

The original Indian Hospital series gained a dedicated following due to its focus on character storytelling. Over six original episodes the series interwove themes of tragedy and hope, resilience and compassion and with Dr Devi Shetty, the hospital’s founder, a source of inspiration and trailblazing innovation.

At Storygami we always go back to what makes the content special. It was the characters that set this series apart and so we understood that whatever we built around this story, we’d have to have to retain that sense of heart.

Bringing interactivity to stories like this is always going to be difficult. We could have easily brought in a lot of superfluous features that simply hang there looking nice, without actually adding to what makes the content great in the first place. What we made sure to do was to keep the features plugged into the themes of the series. If our tech didn’t serve the story or its characters – it didn’t go in.

We identified early on that Al Jazeera used far more than stand alone episodes to tell this story. Their main web page was used to provide viewers an opportunity to look into the themes, subject matter and the characters involved. There was a range of rich content: image galleries, featured articles that detailed concepts around Indian healthcare, web exclusive videos, and lets not forget the vibrant conversations happening on social media.

The problem, however, lay in that each of these media elements were being presented as isolated from each other. The image gallery was on a separate page, each character profile had to be searched for elsewhere and to really delve into the issues around healthcare in India, viewers would have to access yet another separate page.

This is a broader problem with presenting content on the web. Challenges remain around sustaining viewers initial emotional engagement when prompting them to access these scattered pieces of content. More often than not this ‘bonus’ material is left untapped.

How then do we transform this ‘bonus’ material into interweaving layers accessible within that initial experience?

We studied this problem for a long while. In the end we decided to present all these elements inside a unified whole; image galleries, articles, web exclusive videos, character profiles, these all needed to be accessible from within the viewing experience without compromising on the story.

In the example above you can see how we intended to introduce a push menu bar (familiar to anyone who has used apps utilising cards in mobile) so that each element could be accessed whenever viewers wanted. We also brought in a custom Twitter bar which helped bring the conversation on social media into the experience of watching the series itself. The stream was filtered to present tweets with the hashtag #IndianHospital. Now viewers could tweet along with the video if they choose to.

Bringing in disparate elements such as articles, image galleries and videos in a beautiful and seamless way posed key challenges. It came down to design decisions and the use of transparent overlays and their hierarchies.

I remember early on when someone from our development team queried whether having two different types of ‘text layers’ was worth the effort. We call ‘text layers’ any piece of content that is text based as opposed to images or video. It’s a popular feature because it offers clients like Al Jazeera the option to bring in more in-depth content into the video experience.

The two types of text layers we had designed were firstly for information rich content pieces such as a specially written blog post written by Dr Devi Shetty called ‘A Vision For Global Healthcare’ and secondly, the more emotionally engaging pieces such as the short profiles on characters in the series such as Baby Dhayan for example, who was suffering from a facial cleft in the second episode.

The question arose when we were developing these two text types. In order to make sure the features we created could reasonably be developed on budget and within the timeframe it actually made more sense from the logical perspective of scalable development to make sure all text layers look and behave alike. This would have cut down time and made it easier to process.

The questions would come thick and fast: Why not make the character profiles have the same design as the article layers, with black backgrounds and set images? Why do the character layers have to animate into view differently than the article layers which were ostensibly the same feature but styled differently?

I remember explaining that the difference was paramount. We must always be aware of the link between the nature of the content in relation to the viewer’s engagement in mind when designing these experiences. A viewer would not be in the same mindset when reading complicated issues of healthcare in India as they would be reading about a small child who is learning to smile for the first time.

It follows, therefore, that because of the differences in experience of consuming these two types of content, the way each content piece is presented and offered up should be distinct from one another also. The design decision leans toward what would make sense for the viewer/user not necessarily which option would be easiest to replicate, at least not in the context of storytelling.

The tendency in development seems to be geared toward efficiency and scale. As it should be. But the real difference lies in that crucial empathic element since we are, in the end, designing for human beings. You’ll notice that the text layers –  articles and character profiles – look, feel and even animate in differently from each other. It’s a testament to our developers that these points were not regarded as flourishes but as fundamental elements worthy of greater consideration.

It’s not enough to ensure easy working processes between systems. In the end, what will prove what we’re doing matters and is worth investing in as a company and a technology are the hard numbers. Everyone at Storygami firmly believes that our story-led approach to interactive video will become the mainstay. But we simply wouldn’t have the confidence to claim such a position if we didn’t have the numbers to back it up.

We’re developing sophisticated analytics where we will be able to track viewer engagement in any number of ways. Once we launched Indian Hospital Revisited we were able to begin providing deep metrics as to what a viewer accesses, how they access it, whether from the menu bar or marker icons, whether they watch the web exclusive videos all the way through, whether a certain segment of the episode prompted a full read of the article etc. This gives an idea as to what works, what could work better and how we can improve on existing features. We’re currently watching the numbers roll in and look forward to sharing these with Al Jazeera.

I know I speak for everyone at Storygami when I say we feel tremendously privileged to be the ones to have helped create Al Jazeera’s  first ever interactive web documentary. It has proved to be a big step in that lofty ideal we set about achieving: to bring context to content and change web video forever.